<template>
  <div class="w-full h-[50px] pl-[20px]">
    <ul class="flex">
      <li
        class="mr-[20px] leading-[60px] text-[#b7afaf] text-[13px]"
        v-for="(item, index) in userTabsArr"
        @click="changeTabs(item.type)"
        :class="tabsCurrent === item.type ? 'tabActive' : ''"
        :key="index"
      >
        {{ item.name }} {{ item.count }}
      </li>
    </ul>
  </div>
  <div class="px-[5px]">
    <water-home-fall
      :listData="listData"
      :is-info="false"
      @reloadList="onReloadList"
    ></water-home-fall>
  </div>
</template>

<script setup lang="ts">
import waterHomeFall from "@/components/water-home-fall.vue";
import { getUserFollowPhoto } from "@/api/usersApi";
import { onMounted, ref } from "vue";

interface Params {
  phone: string;
  type: number | string;
}

const tabsCurrent = ref<number>(0);
const userTabsArr = ref<Array<any>>([
  { type: 0, name: "作品", count: 0 },
  { type: 1, name: "喜欢", count: 0 },
]);
const listData = ref<Array<object>>([]);
const fetchData = async (type: number = 0) => {
  try {
    const params = {
      phone: localStorage.getItem("phone"),
      type: type,
    } as Params;

    const { data } = await getUserFollowPhoto(params);
    listData.value = data;
    userTabsArr.value[type].count = data.length;
  } catch (e) {}
};
const changeTabs = async (index: number) => {
  tabsCurrent.value = index;
  await fetchData(index);
};
const onReloadList = async () => {
  await fetchData();
};
onMounted(async () => {
  await fetchData();
});
</script>

<style lang="less" scoped>
.tabActive {
  color: #513d3d;
  font-size: 17px;
  font-weight: 500;
}
</style>
